<template>
  <div class="task-view" v-if="isComponentLoaded">
    <el-button type="primary" @click="sendToModuleData">发送数据</el-button>
    <!-- <TaskForm ref="moudleRef" /> -->
    <component :is="TaskForm" ref="moudleRef" />
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "TaskView",
  components: {}
});


import { provide, ref, onActivated, type DefineComponent } from 'vue';
import type { ModuleInterface, SendCmd } from "./types";

import { handlePluginCommand } from '@/utils/commandHandler';
import type { AxiosRequestConfig } from 'axios';
import type { Response } from '@/mctp-api';
import { getPlatformConfig, PlatformConfig } from "@/utils/loadModulesConfig";
import { moduleLoader } from "@/plugins/module-loader";

// 2. 响应式存储组件（核心）
const TaskForm = ref<DefineComponent | null>(null);
let createTaskModule: ((sendCmd: SendCmd<any, any>, initialData: any) => ModuleInterface<any>) | null = null;
const isComponentLoaded = ref(false); // 标记组件是否加载完成，控制模板渲染
interface TaskFormInstance {
  dataEvent: (value: any) => void; // 匹配组件的 dataEvent 方法定义
}
const moudleRef = ref<(DefineComponent & TaskFormInstance) | null>(null);
const index = ref(0);

// 任务模块加载函数（支持插件命名机制）
const importMoudule = async (pluginName: string = 'default-task') => {
  try {
    // 使用模块联邦加载任务模块
    const moduleConfig: PlatformConfig = await getPlatformConfig();
    if (moduleConfig.loadExternalModules) {
      const taskModule = await import('taskModule/main');
      //  const taskModule = await moduleLoader.loadModule('task', 'mctp-task'); //await import('taskModule/main');

      // 从模块中获取组件和初始化函数
      createTaskModule = taskModule.default || taskModule.createTaskModule;
      TaskForm.value = taskModule.TaskForm;
      console.log(`任务模块[${pluginName}]加载成功`, { createTaskModule, TaskForm: taskModule.TaskForm });
    }
    else {
      const fileName = "mctp-modules-task";
      const modulePath = `../../modules/${fileName}/${fileName}.js`;
      const stylePath = `../../modules/${fileName}/assets/style.css`;
      try {
        // 加载样式文件（使用link标签，避免ES模块加载CSS）
        try {
          // 检查样式是否已加载
          const existingLink = document.querySelector(`link[href="${stylePath}"]`);
          if (!existingLink) {
            const link = document.createElement('link');
            link.rel = 'stylesheet';
            link.href = stylePath;
            document.head.appendChild(link);
          }
        } catch (styleErr) {
          console.warn(`插件样式文件加载失败: ${styleErr}`);
        }

        // 动态导入模块
        const module = await import(modulePath);
        createTaskModule = module.default;
        TaskForm.value = module.TaskForm; // 赋值组件对象到响应式变量
        isComponentLoaded.value = true; // 加载完成，允许模板渲染
      } catch (e) {
        console.error("模块导入失败", e);
      }
    }

    isComponentLoaded.value = true;
  } catch (e) {
    console.error(`任务模块[${pluginName}]加载失败`, e);
    // 降级到本地加载
    // await loadLocalPlugin(pluginName);
  }
};

// 本地插件加载（支持命名机制）
const _loadLocalPlugin = async (pluginName: string) => {
  const moduleConfig: PlatformConfig = await getPlatformConfig();
  console.log(`加载本地插件[${pluginName}]`, moduleConfig);

  try {
    let basePath: string;
    let modulePath: string;
    let stylePath: string;

    // 根据配置决定基础路径
    if (import.meta.env.DEV) {
      basePath = '/public/modules';
    } else {
      basePath = '/modules';
    }

    // 使用插件命名路径：modules/mctp-task/{pluginName}/{pluginName}.js
    modulePath = `${basePath}/mctp-task/${pluginName}/${pluginName}.js`;
    stylePath = `${basePath}/mctp-task/${pluginName}/assets/style.css`;

    console.log(`插件路径: ${modulePath}`);

    // 加载样式文件
    try {
      const existingLink = document.querySelector(`link[href="${stylePath}"]`);
      if (!existingLink) {
        const link = document.createElement('link');
        link.rel = 'stylesheet';
        link.href = stylePath;
        document.head.appendChild(link);
      }
    } catch (styleErr) {
      console.warn(`插件[${pluginName}]样式文件加载失败: ${styleErr}`);
    }

    const module = await import(modulePath);
    createTaskModule = module.default || module.createTaskModule;
    TaskForm.value = module.TaskForm;
    isComponentLoaded.value = true;

    console.log(`插件[${pluginName}]加载成功`);
  } catch (e) {
    console.error(`插件[${pluginName}]加载失败`, e);
  }
};

const loadModule = () => {
  if (!createTaskModule) {
    console.error("createTaskModule 未加载完成");
    return;
  }
  // 1. EventData 初始值：空对象（业务数据由后端返回，初始无需填充）
  const initialCalibData = {};

  // 2. 平台命令处理：完全转发插件传递的所有参数，对齐 createPost 逻辑
  const handleModuleCmd: SendCmd<{
    moduleId: string;
    fixedParams?: any;
    data?: Record<string, any>;
    params?: any;
    config?: AxiosRequestConfig;
  }, Response<any>> = async (moduleName, cmd, cmdParams) => {
    if (moduleName !== "TaskForm") return { code: 400, msg: "模块不匹配", data: null };

    console.log("平台接收校准指令：", cmd, cmdParams);
    // 直接调用平台的 handlePluginCommand，传递所有参数（复刻 createPost 逻辑）
    return handlePluginCommand(
      cmdParams?.moduleId || moduleName, // 模块ID（替代 createPost 的 url）
      cmdParams?.fixedParams, // 固定参数（对齐 createPost 的 fixedParams）
      cmdParams?.data, // 业务数据（对齐 createPost 的 data）
      cmdParams?.params, // URL 参数（对齐 createPost 的 params）
      cmdParams?.config // Axios 配置（对齐 createPost 的 config）
    );
  };

  // 3. 创建插件实例：完全对齐原有调用方式
  const taskModule: ModuleInterface<typeof initialCalibData> = createTaskModule(
    handleModuleCmd,
    initialCalibData
  );

  const SEND_TASK_CMD_KEY = "send-task-cmd"; // 协商好的字符串Key
  const GET_TASK_DATA_KEY = "get-task-data"; // 配套的“获取数据”Key

  provide(SEND_TASK_CMD_KEY, (cmd: string, cmdParams?: any) => {
    return taskModule.sendCommand(cmd, cmdParams);
  });
  // 注入“获取数据”方法（供插件调用）
  console.log("平台确认是否为响应式对象", (taskModule.eventData as any).value);
  provide(GET_TASK_DATA_KEY, () => taskModule.eventData);

  // 5. 手动初始化插件
  taskModule.startup();

}

onActivated(async () => {
  // 可以从路由参数、配置或props中获取插件名称
  const pluginName = 'default-task'; // 这里可以改为动态获取

  await importMoudule(pluginName);
  console.log("createTaskModule", createTaskModule, "TaskForm", TaskForm);
  loadModule();
  (moudleRef.value as any)?.dataEvent(index.value);
})


const sendToModuleData = () => {
  // setInterval(() => {
  //   index.value++;
  //   (moudleRef.value as any)?.dataEvent(index.value);
  // }, 100);

  index.value++;
  (moudleRef.value as any)?.dataEvent(index.value);

}

</script>

<style lang="scss" scoped>
.task-view {
  padding: 12px;
  height: 100%;
  overflow: scroll;
}
</style>
